{extend name="layout/base"}￼

{block name="content"}
<div class="list_top">
    <div class="layui-inline">
        <input class="layui-input" name="key" id="key" placeholder="请输入标题">
    </div>
    <button class="layui-btn" id="search" data-type="reload">搜索</button>
    <button class="layui-btn" id="add" data-type="reload"><i class="layui-icon">&#xe608;</i>添加</button>
</div>

<table lay-filter="table" id="table" class="table"></table>

<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-sm" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<script type="text/html" id="picture">
    <div class="video_pic" id="play">
        <img src="{{d.img}}" class="video_img">
        <div class="video_play">
            <img src="/static/images/play3.png" alt="">
        </div>
    </div>
</script>
<style type="text/css">
    .layui-table-body .laytable-cell-1-0-2{
        height: 100px;
    }    
    video:-webkit-full-page-media {width: 100%;
        height: 100%;
        object-fit: cover !important;}
</style>
<script>
    layui.use(['jquery', 'table', 'layer'], function ($, table, layer) {
        var opt = {
            elem: '#table',
            url: "{:url('')}",
            method: 'post',
            page: true,
            toolbar: true,
            cols: [[
                {field: 'id', title: 'ID', style:'height:100px;'},
                {field: 'title', title: '视频标题', style:'height:100px;'},
                {field: 'img', title: '视频图片', templet: '#picture', event: 'img'},
                {field: 'brief', title: '简述', style:'height:100px;'},
                {field: 'cid', title: '视频分类', style:'height:100px;'},
                {field: 'utime', title: '创建时间', style:'height:100px;'},
                // {field: 'video_status', title: '状态', templet: '#status'},
                {title: '操作', toolbar: '#tool'}
            ]],
            where: {}
        }, tabIns = table.render(opt);

        $('#search').on('click', function() {
            var key = $('#key').val();
            var type = $('#type').val();
            // if($.trim(key)==='') {
            //     layer.msg('请输入关键字！',{icon:0});
            //     return;
            // }
            tabIns.reload({
                where: {key: key,type: type}
            });
        });
        $('#add').on('click', function () {
            location.href="{:url('video/add')}"
        })        
        table.on('tool(table)', function (obj) {
            var id = obj.data.id;
            switch (obj.event) {
                case 'del':
                    layer.confirm('确定要删除吗', function (index) {
                        $.get("{:url('video/del')}", {id: id});
                        layer.close(index);
                        tabIns.reload(opt)
                    });
                    break;
                case 'edit':
                    location.href="{:url('video/edit')}?id="+id;
                    break;
                case 'img':                    
                    layer.open({
                        type: 1,
                        area: ['40%', '40%'],
                        title: '视频',
                        content: `<div class="video_address"><video src="${obj.data.video_address}" controls autobuffer poster="${obj.data.video_img}"></video></div>` 
                    })                    
                break;
                default:
                    break;
            }
        });
    });
</script>
{/block}
